<template>
	<view class="container">
		<view class="section-title">相关品种</view>
		<view class="breed-list">
			<text v-for="(kind, index) in kinds" :key="index" @click="filterKind(kind)"
				class="breed-item">{{ kind }}</text>
		</view>

		<view class="pet-title">相关宠物</view>
		<view class="filters">
			<picker mode="selector" @change="filterLocation" :value="0" :range="['全国']">
				<view class="filter-item">全国</view>
			</picker>
			<picker mode="selector" @change="filterPrice" :value="priceIndex" :range="priceOptions">
				<view class="filter-item">{{ priceDisplay }}</view>
			</picker>
			<picker mode="selector" @change="filterGender" :value="genderIndex" :range="genderOptions">
				<view class="filter-item">{{ genderDisplay }}</view>
			</picker>
			<picker mode="selector" @change="filterSterilization" :value="sterilizationIndex"
				:range="sterilizationOptions">
				<view class="filter-item">{{ sterilizationDisplay }}</view>
			</picker>
		</view>
		<view class="pet-list">
			<view v-for="(pet, index) in filteredPets" :key="index" class="pet-item">
				<image :src="pet.goodsImgUrl" class="pet-image"></image>
				<view class="pet-info">
					<text class="pet-name">{{ pet.goodsName }}</text>
					<text class="pet-price">￥{{ pet.price }}</text>
					<text class="pet-gender">{{ pet.gender }}</text>
					<text class="pet-status">{{ pet.status }}</text>
					<text class="pet-date">{{ pet.launchTime }}</text>
					<text class="pet-location">{{ pet.location }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
	import service from '../../utils/request.js';
	export default {
		data() {
			return {
				allPets: [],
				filteredPets: [],
				kinds: ['猫', '狗', '乌龟', '鸟', '鸭子'],
				priceOptions: ['低到高', '高到低'],
				priceIndex: -1,
				genderOptions: ['公', '母'],
				genderIndex: -1,
				sterilizationOptions: ['已绝育', '未绝育'],
				sterilizationIndex: -1
			};
		},
		mounted() {
			this.getAllPetsData();
		},
		computed: {
			priceDisplay() {
				return this.priceOptions[this.priceIndex] || '价格▼';
			},
			genderDisplay() {
				return this.genderOptions[this.genderIndex] || '性别▼';
			},
			sterilizationDisplay() {
				return this.sterilizationOptions[this.sterilizationIndex] || '绝育▼';
			}
		},
		methods: {
			filterKind(kind) {
				this.filteredPets = this.allPets.filter(pet => pet.goodsType === kind);
				this.resetFilters();
			},
			filterLocation(e) {
				// 位置筛选器，由于位置固定为全国，这里可以不实现具体逻辑
			},
			filterPrice(e) {
				this.priceIndex = e.detail.value;
				this.applyFilters();
			},
			filterGender(e) {
				this.genderIndex = e.detail.value;
				this.applyFilters();
			},
			filterSterilization(e) {
				this.sterilizationIndex = e.detail.value;
				this.applyFilters();
			},
			applyFilters() {
				let filtered = this.filteredPets;
				if (this.priceIndex >= 0) {
					filtered = filtered.sort((a, b) => {
						return this.priceIndex === 0 ? a.price - b.price : b.price - a.price;
					});
				}
				if (this.genderIndex >= 0) {
					filtered = filtered.filter(pet => pet.gender === this.genderOptions[this.genderIndex].slice(0, 2));
				}
				if (this.sterilizationIndex >= 0) {
					filtered = filtered.filter(pet => pet.status === this.sterilizationOptions[this.sterilizationIndex]);
				}
				this.filteredPets = filtered;
			},
			resetFilters() {
				this.priceIndex = -1;
				this.genderIndex = -1;
				this.sterilizationIndex = -1;
			},
			async getAllPetsData() {
				try {
					const response = await service.get('/pets/listAll');
					this.allPets = response.data; // 数据成功获取后赋值给 allPets
					this.filteredPets = this.allPets; // 在数据获取成功后，再赋值给 filteredPets
					console.log('获取的数据:', response);
				} catch (error) {
					console.error('获取数据失败:', error);
				}
			},
		},
		mounted() {
			this.filteredPets = this.allPets;
		}
	};
</script>

<style lang="scss" scoped>
	@use "search-result";
</style>